<!-- 占道经营/报警信息 -->
<template>
  <div style=" overflow: hidden" class="flex flex-direction">
    <checked-title title="每日案件采集量"></checked-title>
    <div
      class="echarts"
      id="echartsId"
      ref="echartsId"
      style="height: 180px"
    ></div>
  </div>
</template>

<script>
import { getAlarmInformationListScreen } from '@/api/index'
import { ZhanDaoJingYing } from '@/api'

export default {
  data() {
    return {
      list: [],
      point1: [],
      point2: [],
      point3: [],
      point4: [],
      point5: [],
    }
  },
  mounted() {
    this.getList()
    // this.echartsInit();
  },
  beforeDestroy() {
    this.desHander()
  },
  methods: {
    getList() {
      ZhanDaoJingYing.GetDayOrderNum()
        .then((res) => {
          res.data.forEach((item, index) => {
            this.point1.push(item.szNum)
            this.point2.push(item.createTime)
            this.point3.push(item.num)
            this.point4.push(item.otherNum)
            this.point5.push(item.bmNum)
            // this.point.push({
            //   title: arr[index],
            //   name: [],
            //   num: [],
            // })
            this.echartsInit()
          })
        })
        .catch((err) => {
        })
    },
    echartsInit() {
      const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
      var chartDom = document.getElementById('echartsId')
      var myChart = echarts.init(chartDom)
      let option = {
        legend: {
          icon: 'roundRect',
          top: '0%',
          right: 0,
          x:"center",
          align: 'left',
          itemWidth: 15,
          itemHeight: 5,
          itemGap: 20,
          textStyle: {
            color: '#CFD2D6',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          formatter: params => {
            let str = `
                ${params[0].name}<br/>
                ${params[0].seriesName}: ${params[0].value}件<br/>
                ${params[1].seriesName}: ${params[1].value}件<br/>
                ${params[2].seriesName}: ${params[2].value}件<br/>
                ${params[3].seriesName}: ${params[3].value}件
            `
            return str
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c',
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
        },
        grid: {
          left: '0', // 固定左边刻度宽度
          right: '5%',
          bottom: '5%',
          containLabel: true,
        },
        xAxis: [
          {
            show: true,
            type: 'category',
            data: this.point2,
            boundaryGap: true,
            axisLabel: {
              textStyle: {
                color: '#9EADC9',
              },
            },
          },
        ],

        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#DCE2E8',
              },
            },
            axisLabel: {
              textStyle: {
                color: '#9EADC9',
              },
            },
            // 分割线
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9',
              },
            },
          },
        ],
        series: [
        {
            cursor: 'pointer',
            name: '总案件数',
            type: 'line',
            data: this.point3,
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            // lineStyle: {
            //   width: 4,
            //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //     {
            //       offset: 0,
            //       color: '#8920FF',
            //     },
            //   ]),
            // },
            // itemStyle: {
            //   normal: {
            //     color: '#8920FF',
            //     borderColor: colorList[0],
            //   },
            // },
            lineStyle: {
              width: 4,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#FF8A00',
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: '#FF8A00',
                borderColor: colorList[0],
              },
            },
          },
          {
            name: '便民热线',
            type: 'line',
            data: this.point5,
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            // lineStyle: {
            //   width: 4,
            //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //     {
            //       offset: 0,
            //       color: '#FE005A',
            //     },
            //   ]),
            // },
            // itemStyle: {
            //   normal: {
            //     color: '#FE005A',
            //     borderColor: colorList[0],
            //   },
            // },
            lineStyle: {
              width: 4,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#8920FF',
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: '#8920FF',
                borderColor: colorList[0],
              },
            },
          },
          {
            name: '数字城管',
            type: 'line',
            data: this.point1,
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 4,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#9effff',
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: '#9effff',
                borderColor: colorList[1],
              },
            },
          },
          {
            name: '其它',
            type: 'line',
            data: this.point4,
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 4,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#B31AC6',
                },
              ]),
            },
            itemStyle: {
              normal: {
                color: '#B31AC6',
                borderColor: colorList[0],
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },

    desHander() {
      let myChart = echarts.init(this.$refs.echartsId)
      myChart.dispose()
    },
  },
}
</script>

<style lang="less" scoped>
.chunk_con {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 15px 0 20px;
  overflow: auto;

  li {
    margin-bottom: 8px;
    // padding: 10px 15px 10px 15px;
    padding: 10px 20px;
    display: flex;
    background: url('~@/assets/images/content/moduleItembj.png') no-repeat;
    background-size: 100% 100%;
    flex: 1;

    .chunk_con_left {
      flex: 1;
      overflow: hidden;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .title {
        color: #21d3ff;
        font-size: 16px;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-bottom: 5px;
      }

      .date {
        color: #9ed5ff;
        font-size: 14px;
      }
    }

    .chunk_con_right {
      width: 80px;
      height: 50px;
      border: 1px solid #fff;
      object-fit: cover;
    }
  }
}

.chunk_con::-webkit-scrollbar {
  width: 5px;
}

.chunk_con::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #2e4a89;
}

.chunk_con::-webkit-scrollbar-track {
  background: transparent;
}
</style>
